<template>
    <!-- html -->
    <div class="Detail">
        <h3>this is Detail.</h3>
        <div>
            <ul>
                <li>{{ query.id }}</li>
                <li>{{ query.name }}</li>
                <li>{{ query.age }}</li>
            </ul>
        </div>
    </div>
</template>

<!-- 安装 vue 路由模块  npm install vue-router -->

<!-- npm i vite-plugin-vue-setup-extend -D -->
<script lang="ts" setup name='Detail'>
import { toRefs } from 'vue';
import { useRoute } from 'vue-router'
const router = useRoute()
const { query } = toRefs(router)
</script>

<style scoped>
/* 样式 */
.Detail {
    background-color: skyblue;
    border-radius: 10px;
    padding: 20px;
}
</style>